<template>
	<view class="box">
		<view class="title">
			<span>用料</span>
			<span class="value">{{ info.dosageTotal }}</span>
		</view>
		<view v-if="info.foodList.length" class="food-list">
			<view v-for="(item,index) in info.foodList" :key="index">
				<view v-if="item.hasChildren">
					<view class="food-group">{{ item.title }}</view>
					<view v-for="(food,index) in item.children" class="food-item" :key="index">
						<view class="name">{{ food.title }}</view>
						<view class="dosage">{{ food.dosage + food.unit }}</view>
					</view>
				</view>
				<view v-else class="food-item">
					<view class="name">{{ item.title }}</view>
					<view class="dosage">{{ item.dosage + item.unit }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'material',
		props: {
			info: {
				type: Object,
				default: () => ({
					canSetNum: false,
					personNum: 0,
					dosageTotal: '',
					foodList: []
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.box {
		margin-bottom: 40rpx;
	}
	.title {
		font-size: 40rpx;
		margin-bottom: 30rpx;
		.value {
			margin-left: 10rpx;
			font-size: 30rpx;
		}
	}
	.food-list {
		.food-group {
			height: 70rpx;
			line-height: 70rpx;
			font-size: 36rpx;
			background-color: #efefef;
			padding: 0 20rpx;
			border-radius: 18rpx;
		}
		.food-item {
			padding: 0 20rpx;
			height: 70rpx;
			line-height: 70rpx;
			display: flex;
			justify-content: space-between;
		}
	}
</style>